import React from 'react';
import { connect } from 'dva';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import TabItemC from './tabItem';
import config from '../../../utils/tableMoreIdConfig';
import { ContentPackage } from '../../../comps';
import style from './index.less';

const { TabPane } = Tabs;
const {
  bondDeviationAnalysis: { ChinaDebtTable, HighestPurityTable, personalWitnessTable },
} = config;
let count = 1;
class BondDeviationAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '中债', // 中债：0 上清：1 中证：2  tab当前选中的页（默认选第一个）
      nowKey: false,
    };
  }

  componentDidMount() {
    // 查询下拉枚举值 "CREDITBND_MONITOR_BONDTYPEII"二级分类备用
    //    CREDITBND_MONITOR_BIASBP 偏离度bp的key
    // CREDITBND_MONITOR_RANGE 分析范围的key
    const {
      globalM: { dataDictionary = {} },
    } = this.props;
    this.props.dispatch({
      type: `bondAnalysisM/save`,
      payload: {
        dictMap: dataDictionary,
      },
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { activeKey } = this.state;
    if (nextProps.nowKey == true) {
      // 关闭后第一次进入的时候的计时
      if (count == 0) {
        // 此时需要继续定时器
        if (activeKey === '中债') {
          if (this.chinaRet?.state?.searchParams) {
            this.chinaRet.onSearch(this.chinaRet.state.searchParams);
          }
        } else if (activeKey === '上清') {
          if (this.upQing?.state?.searchParams) {
            this.upQing.onSearch(this.upQing.state.searchParams);
          }
        } else if (activeKey === '中证') {
          if (this.personalWitness?.state?.searchParams) {
            this.personalWitness.onSearch(this.personalWitness.state.searchParams);
          }
        }
      }
      count++;
    } else if (nextProps.nowKey == false) {
      count = 0;
      // 此时需要清除定时器
      this.clearTimer();
    }
  }

  // 清除定时器
  clearTimer = () => {
    if (this.chinaRet) {
      clearInterval(this.chinaRet?.state?.timeoutId);
    }
    if (this.upQing) {
      clearInterval(this.upQing?.state?.timeoutId);
    }
    if (this.personalWitness) {
      clearInterval(this.personalWitness?.state?.timeoutId);
    }
  };

  // tab切换时调用
  handleChangeTab = (value) => {
    this.setState({
      activeKey: value, // 设置当前活动的tab key
    });
  };

  // tab bar上额外的元素
  createBarExtraContent = () => {
    return (
      <div className={style.barTip}>
        <ExclamationCircleOutlined className={style.barIcon} />
        <span>本页面展示当天全市场有交易的个券偏离度情况</span>
      </div>
    );
  };

  render() {
    const { activeKey } = this.state;
    const { dictMap } = this.props.bondAnalysisM;
    return (
      <ContentPackage
        title='实时偏离监控'
        contentHtml={
          <div className={style.bondDeviation}>
            <Tabs activeKey={activeKey} onChange={this.handleChangeTab} style={{ width: '100%' }} tabBarExtraContent={this.createBarExtraContent()}>
              <TabPane tab='中债' key='中债'>
                {activeKey === '中债' && <TabItemC activeKey={activeKey} {...dictMap} idSet={ChinaDebtTable} onRef={(ref) => (this.chinaRet = ref)} />}
              </TabPane>
              <TabPane tab='上清' key='上清'>
                {activeKey === '上清' && <TabItemC activeKey={activeKey} {...dictMap} idSet={HighestPurityTable} onRef={(ref) => (this.upQing = ref)} />}
              </TabPane>
              <TabPane tab='中证' key='中证'>
                {activeKey === '中证' && <TabItemC activeKey={activeKey} {...dictMap} idSet={personalWitnessTable} onRef={(ref) => (this.personalWitness = ref)} />}
              </TabPane>
            </Tabs>
          </div>
        }
      />
    );
  }
}

export default connect(({ bondAnalysisM, userM: user, loading, globalM }) => ({
  bondAnalysisM,
  loading,
  user,
  globalM,
}))(BondDeviationAnalysis);
